<template>
  <div class="room-content">
    <!-- !房源信息 -->
    <a-card size="small">
      <a-descriptions :column="4" layout="vertical" :colon="false">
        <template #title>
          <div class="text-title">基础信息</div>
        </template>
        <a-descriptions-item>
          <template #label>
            <span>{{ $L("房源") }}名称</span>
          </template>
          {{ detail.room_name || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="房间数字编号">
          {{ detail.room_number || "--" }}
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span>{{ $L("房源") }}位置</span>
          </template>
          {{ detail.village_name }} / {{ detail.build_name }} /
          {{ detail.layer_name }}
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span>{{ $L("房源") }}管理编号</span>
          </template>
          {{ detail.room_alias_id || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="计租面积">
          {{ detail.rental_area || "--" }} ㎡
        </a-descriptions-item>
        <a-descriptions-item label="计费面积">
          {{ detail.charging_area || "--" }} ㎡
        </a-descriptions-item>
        <a-descriptions-item label="建筑面积">
          {{ detail.build_area || "--" }} ㎡
        </a-descriptions-item>
        <a-descriptions-item label="套内面积">
          {{ detail.inside_area || "--" }} ㎡
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span>虚拟{{ $L("房源") }}</span>
          </template>
          {{ detail.is_unreal == 1 ? "是" : "否" }}
        </a-descriptions-item>
        <a-descriptions-item label="绑定业主">
          {{ detail.landlord_info && detail.landlord_info.landlord_name || "--" }}
        </a-descriptions-item>
      </a-descriptions>

      <a-descriptions
        :column="4"
        class="contrainer mt-20"
        layout="vertical"
        :colon="false"
      >
        <template #title>
          <div class="text-title">招商信息</div>
        </template>
        <a-descriptions-item label="产权性质">
          {{ detail.property_right_txt || "--" }}
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span>{{ $L("房源") }}状态</span>
          </template>
          {{ detail.status_txt || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="租赁状态">
          {{ detail.room_status_txt || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="招商状态">
          {{ detail.invitation_status_txt || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="可租日期">
          {{ detail.lease_end || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="装修情况">
          {{ detail.decoration_txt || "--" }}
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span>{{ $L("房源") }}类型</span>
          </template>
          {{ detail.house_type_txt || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="报价">
          {{ detail.pre_unit_price || "--" }}
          <a @click="priceHistory">（房价历史）</a>
        </a-descriptions-item>
        <a-descriptions-item label="底价">
          {{ detail.pre_unit_price_min || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="单位">
          {{ detail.price_unit_txt || "--" }}
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span>{{ $L("房源") }}备案号</span>
          </template>
          {{ detail.record_no || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="层高">
          {{ detail.floor_height || "--" }} m
        </a-descriptions-item>
        <a-descriptions-item label="荷载值">
          {{ detail.load_max || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="VR链接">
          {{ detail.vr_link || "--" }}
        </a-descriptions-item>
        <a-descriptions-item :span="2">
          <template #label>
            <span>{{ $L("房源") }}标签</span>
          </template>
          <template v-if="detail.tag_arr && detail.tag_arr.length">
            <TagList :list="detail.tag_arr" :type="2" />
          </template>
          <span v-else>--</span>
        </a-descriptions-item>
        <a-descriptions-item :span="4">
          <template #label>
            <span>{{ $L("房源") }}图片</span>
          </template>
          <template v-if="detail.images && detail.images.length">
            <a-image
              v-for="(img, index) of detail.images"
              :key="index"
              :width="80"
              :src="img"
              style="padding: 0 10px"
            />
          </template>
          <span v-else>--</span>
        </a-descriptions-item>
      </a-descriptions>

      <a-descriptions
        :column="4"
        v-if="detail.extra_config"
        class="contrainer mt-20"
        layout="vertical"
        :colon="false"
      >
        <template #title>
          <div class="text-title">拓展信息</div>
        </template>
        <a-descriptions-item label="使用率">
          {{ detail.extra_config.utilization || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="办公格局">
          {{ detail.extra_config.officePattern || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="窗面朝向">
          {{ detail.extra_config.windowFaceOrientation || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="免租期">
          {{ detail.extra_config.rentFree || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="最短租期">
          {{ detail.extra_config.minLeaseTerm || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="排序值">
          {{ detail.sort || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="工位数量">
          <span
            v-if="
              detail.extra_config.station_number_min ||
              detail.extra_config.station_number_max
            "
          >
            <a-space :size="2">
              <span>{{ detail.extra_config.station_number_min || "~" }}</span>
              <span>-</span>
              <span>{{ detail.extra_config.station_number_max || "~" }}</span>
            </a-space>
          </span>
          <span v-else>--</span>
        </a-descriptions-item>
        <a-descriptions-item label="户型图说明">
          {{ detail.extra_config.houseDescription || "--" }}
        </a-descriptions-item>
        <a-descriptions-item label="户型图">
          <a-image
            v-if="detail.extra_config.house"
            :width="80"
            :src="detail.extra_config.house"
          />
          <span v-else>--</span>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions
        :column="1"
        class="contrainer mt-20"
        layout="vertical"
        style="margin-bottom: 10px"
        v-show="isRoomPrice"
        :colon="false"
      >
        <template #title>
          <div class="text-title">房价走势</div>
        </template>
        <a-descriptions-item>
          <div id="roomPrice"></div>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <!-- 房价历史 -->
    <PriceHistory
      :visible="priceHistoryVisible"
      :id="detail.id"
      @clear="priceHistoryVisible = false"
    />
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
  onUnmounted,
} from "vue";
import TagList from "../../Tag/show.vue";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
import { Chart } from "@antv/g2";
import PriceHistory from "./PriceHistory.vue";
export default defineComponent({
  name: "RoomContent",
  components: { TagList, PriceHistory },
  props: {
    // 房源详情
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      priceHistoryVisible: false,
      isRoomPrice: false,
    });
    const chart = {};
    const getRoomPriceList = () => {
      let params = {
        room_id: props.detail.id,
      };
      request
        .get("/village", "/project/room_price/list", params)
        .then((res) => {
          state.isRoomPrice = res.list.length ? true : false;
          let list = [];
          res.list.forEach((item) => {
            if (item.square_day) {
              if (item.status == 0) {
                item.square_day = 0;
              }
              list.push({
                name: "m²/天",
                created_at: item.created_day,
                price: Number(item.square_day),
              });
            }
            if (item.square_month) {
              if (item.status == 0) {
                item.square_month = 0;
              }
              list.push({
                name: "m²/月",
                created_at: item.created_day,
                price: Number(item.square_month),
              });
            }
            if (item.day) {
              if (item.status == 0) {
                item.day = 0;
              }
              list.push({
                name: "天",
                created_at: item.created_day,
                price: Number(item.day),
              });
            }
            if (item.month) {
              if (item.status == 0) {
                item.month = 0;
              }
              list.push({
                name: "月",
                created_at: item.created_day,
                price: Number(item.month),
              });
            }
            if (item.year) {
              if (item.status == 0) {
                item.year = 0;
              }
              list.push({
                name: "年",
                created_at: item.created_day,
                price: Number(item.year),
              });
            }
          });
          chart.chart1 = new Chart({
            container: "roomPrice",
            autoFit: true,
            width: 1140,
            height: 220,
          });
          chart.chart1.changeData(list);
          chart.chart1.scale({
            created_at: {
              range: [0, 1],
              nice: true,
            },
            price: {
              min: 0,
              nice: true,
            },
          });
          chart.chart1.annotation().text({
            content: "元",
            style: {
              fill: "#8c8c8c",
              fontWeight: 300,
            },
            offsetY: -170,
            offsetX: -15,
          });

          chart.chart1.tooltip({
            showCrosshairs: true,
            shared: true,
          });
          chart.chart1.legend("name", {
            position: "top",
          });
          chart.chart1.axis("price", {
            label: {
              formatter: (val) => {
                return val;
              },
            },
          });

          chart.chart1
            .line()
            .position("created_at*price")
            .color("name")
            .shape("smooth");

          chart.chart1.render();
        });
    };

    onMounted(() => {
      if (chart.chart1) {
        chart.chart1.destroy();
      }
      getRoomPriceList();
    });

    onUnmounted(() => {
      if (chart.chart1) {
        chart.chart1.destroy();
      }
    });

    const priceHistory = () => {
      state.priceHistoryVisible = true;
    };

    watch(
      () => state.priceHistoryVisible,
      (val) => {
        if (!val) {
          if (chart.chart1) {
            chart.chart1.destroy();
          }
          getRoomPriceList();
        }
      }
    );

    watch(
      () => props.detail,
      (val) => {
        if (chart.chart1) {
          chart.chart1.destroy();
        }
        getRoomPriceList();
      }
    );

    return {
      ...toRefs(state),
      priceHistory,
    };
  },
});
</script>
<style lang="less" scoped>
.room-content {
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  background: #fff;
  :deep(.ant-descriptions-item-label) {
    margin-bottom: -8px;
  }
  .text-title {
    font-size: 16px;
  }
}
</style>
